<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>近用戴镜视力</title>
  <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
  <link rel="stylesheet" href="./scan.css">
</head>
<body>
  <div class="input-data">
      <!-- <div class="content-block-title">标题和副标题</div> -->
      <div class="list-block">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">右眼</div>
            </div>
          </li>
          <li class="item-content item-link">
            <div class="item-inner righteye" onclick="checkFun('right')">
              <div class="item-title">近用戴镜视力</div>
              <div class="item-after">0.7</div>
            </div>
          </li>
        </ul>
      </div>

      <div class="list-block">
          <ul>
            <li class="item-content">
              <div class="item-inner">
                <div class="item-title">左眼</div>
              </div>
            </li>
            <li class="item-content item-link">
              <div class="item-inner lefteye" onclick="checkFun('left')">
                <div class="item-title">近用戴镜视力</div>
                <div class="item-after">0.5</div>
              </div>
            </li>
          </ul>
        </div>

      <div class="content-block-title">参考值</div>
      <div class="list-block">
          <ul>
            <li class="item-content">
              <div class="item-inner">
                <div class="item-title">0-7岁0.6~1.0,7岁以上1.0</div>
              </div>
            </li>
          </ul>
        </div>

        <div class="content-block-title">备注</div>
        <div class="list-block">
            <ul>
              <li class="item-content">
                <div class="item-inner">
                    <div class="item-input">
                        <textarea></textarea>
                      </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="col-80"><a href="#" class="button button-big button-fill button-success">保存</a></div>

          <!-- 模态框 -->
          <div class="checkList">
              <div class="list-block">
                  <ul>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">请选择</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content active">
                      <div class="item-inner">
                        <div class="item-title">1.0</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.9</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.8</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.7</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.6</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.5</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.4</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.3</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.2</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.15</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.1</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.05</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">0.02</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">指数/30cm</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">手动/20cm</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">光感</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                    <li class="item-content">
                      <div class="item-inner">
                        <div class="item-title">无光感</div>
                        <span class="icon icon-star"></span>
                      </div>
                    </li>
                  </ul>
                </div>
          </div>

  </div>

  
  <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
  <script>
    var rightOrleft = 'right'
    function checkFun (eye) {
        rightOrleft = eye
        $('.checkList').css({"display":"block"})
    };

    $('.checkList').on('click', function () {
        $('.checkList').css({"display":"none"})  
    });

    $('.checkList .item-content').on('click', function () {
        $('.checkList .item-content').css({"background":"#fff","color":"#000"})  
        $(this).css({"background":"#0894ec","color":"#ffffff"})
        if(rightOrleft == 'left'){
          $('.lefteye .item-after').text($(this).text());
        }else{
          $('.righteye .item-after').text($(this).text());
        }
    });

  </script>
</body>
</html>